import React from 'react';
import DashboardCard from './DashboardCard';
import { BarChart, LineChart, PieChart, RadarChart } from './ChartComponents';
import AlertList from './AlertList';
import './Dashboard.css'; // 包含背景和布局样式

const Dashboard: React.FC = () => {
  return (
    <div id="app">
      <div className="background"></div>
      <div className="content">
        <DashboardCard/>
        
        {/* 新增的图表组件 */}
        <div className="charts-container">
          <div className="chart-row">
            <div className="chart-card">
              <h3 className="chart-title">数据抓取量统计</h3>
              <BarChart />
            </div>
            
            <div className="chart-card">
              <h3 className="chart-title">用户增长趋势</h3>
              <LineChart />
            </div>
          </div>
          
          <div className="chart-row">
            <div className="chart-card">
              <h3 className="chart-title">平台分布情况</h3>
              <PieChart />
            </div>
            
            <div className="chart-card">
              <h3 className="chart-title">平台综合表现</h3>
              <RadarChart />
            </div>
          </div>
        </div>
        
        <AlertList />
      </div>
    </div>
  );
};

export default Dashboard;